<template>
	<!-- 我发起的 -->
	<view style="padding-top: 150rpx;">
		<view v-for="item in list" :key="item.Id">
			<u-card :title="item.Name" :sub-title="item.CreatedUserRealName" thumb="">
				<view class="" slot="body">
					<div class="flex column">
						<span>单号: {{ item.ReferenceNo}}</span>
						<span>创建时间: {{subTitle(item.CreatedTime)}}</span>
						<uni-tag :mark="true" :text="getTagColorText('text', item.StateText)" size="default"
							:type="getTagColorText('color', item.StateText)"
							style="width:130rpx;margin-top: 5rpx;text-align: center;" />
					</div>
				</view>
				<view class="" slot="foot">
					<div style="text-align: right;">
						<u-button size="mini" type="warning" style="height: 60rpx;margin-left: 25rpx;"
							@click="ApprovalHistoryClick(item)">审批记录</u-button>
						<u-button v-if="hasPermission('Ai_Workitem.Edit')" size="mini" plain type="primary"
							style="height: 60rpx;margin-left: 25rpx;" @click="handleDetail(item)"><span
								style="color:#000">
								查看</span></u-button>
						<u-button v-if="item.State === 2" size="mini" type="error"
							style="height: 60rpx;margin-left: 25rpx;" @click="handleCancle(item)">撤回</u-button>
					</div>
				</view>
			</u-card>
		</view>
		<div style="padding-bottom: 20px;">
			<LoadingMore :status="status" :contentText="contentText" :rows="list"></LoadingMore>
		</div>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		// 获取我发起的列表
		Ai_WorkitemGetMyInitiatedDataList,
		// 日常审批撤回
		Ai_WorkitemDailyApprovedCanceled,
		// 差旅审批撤回
		Ai_WorkitemTravelApprovedCanceled,
		// 工资审批流撤回
		Ai_WorkitemSalaryApprovedCanceled,
		// 工资名册审批流撤回
		Ai_WorkitemSalaryRosterApprovedCanceled,
		// 获取日常报销单主表详情
		Reimburse_Daily_MainGetTheData,
		// 获取差旅报销单主表详情
		Reimburse_Travel_Business_MainGetTheData,
		// 获取工资审批流详情
		Salary_ApprovalFormGetTheData,
		// 获取工资名册审批流详情
		SalaryRoster_ApprovalFormGetTheData,
	} from '@/api/interface.js'
	export default {
		props: {
			// 获取传递过来的公司id
			DetpId: {
				type: String,
			}
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				list: [],
				sorter: {
					SortField: 'Id',
					SortType: 'desc'
				},
				loading: false,
				pagination: {
					current: 1,
					pageSize: 10,
				},
				Total: 0,
				queryParam: {
					// 暂时用单号搜索  后续根据需求 修改此处
					condition: "Name",
					keyword: ""
				},
			}
		},
		computed: {
			...mapState(["Permissions"]),
		},
		methods: {
			// 标签状态回调函数
			getTagColorText(key, state) {
				let color = ""
				let text = ""
				if (key === 'color') {
					if (state === '草稿') {
						color = ""
					} else if (state === '已取消') {
						color = "error"
					} else if (state === '运行中') {
						color = "primary"
					} else if (state === '已完成') {
						color = "success"
					}

					return color
				} else {
					text = state
					return text
				}
			},
			// 用于父组件调用上拉加载
			getReachBottom(current) {
				this.pagination.current = current
				//上拉加载获 获取我发起的列表
				this.getAi_WorkitemGetMyInitiatedDataList()
			},
			// 按钮权限函数
			hasPermission(permission) {
				return this.Permissions.includes(permission)
			},
			// 列表时间格式化
			subTitle(value) {
				let time = ""
				if (value) {
					time = this.$moment(value).format("YYYY-MM-DD HH:mm")
				}
				return time
			},
			// 审批历史跳转
			ApprovalHistoryClick(item) {
				if (item.TemplateName === '日常报销单') {
					// 日常报销单详情
					this.getReimburse_Daily_MainGetTheData(item)
				} else if (item.TemplateName === '差旅费报销单') {
					// 差旅报销单详情
					this.getReimburse_Travel_Business_MainGetTheData(item)
				} else if (item.TemplateName === '工资审批流') {
					// 获取工资审批流详情
					this.getSalary_ApprovalFormGetTheData(item)
				} else {
					// 获取工资名册审批流详情
					this.getSalaryRoster_ApprovalFormGetTheData(item)
				}

			},
			// 获取工资审批流详情
			getSalary_ApprovalFormGetTheData(item) {
				uni.showLoading({
					title: '加载中'
				})
				Salary_ApprovalFormGetTheData({
					id: item.ApprovalFormId
				}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						if (resJson.Data.ai_Workitems !== null) {
							resJson.Data.ai_Workitems.forEach(item => {
								// 日期格式化
								item.StartTime = this.$moment(item.StartTime).format(
									"YYYY-MM-DD hh:mm:ss")
							})
						}
						let ai_Workitems = JSON.stringify(resJson.Data.ai_Workitems)
						uni.navigateTo({
							url: "/pages/Approval/ApprovalHistory?ai_Workitems=" + ai_Workitems
						})
					}
				})
			},
			// 获取工资名册审批流详情
			getSalaryRoster_ApprovalFormGetTheData(item) {
				uni.showLoading({
					title: '加载中'
				})
				SalaryRoster_ApprovalFormGetTheData({
					id: item.ApprovalFormId
				}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						if (resJson.Data.ai_Workitems !== null) {
							resJson.Data.ai_Workitems.forEach(item => {
								// 日期格式化
								item.StartTime = this.$moment(item.StartTime).format(
									"YYYY-MM-DD hh:mm:ss")
							})
						}
						let ai_Workitems = JSON.stringify(resJson.Data.ai_Workitems)
						uni.navigateTo({
							url: "/pages/Approval/ApprovalHistory?ai_Workitems=" + ai_Workitems
						})
					}
				})
			},
			// 日常报销单详情
			getReimburse_Daily_MainGetTheData(item) {
				uni.showLoading({
					title: '加载中'
				})
				Reimburse_Daily_MainGetTheData({
					id: item.ApprovalFormId
				}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						if (resJson.Data.ai_Workitems !== null) {
							resJson.Data.ai_Workitems.forEach(item => {
								// 日期格式化
								item.StartTime = this.$moment(item.StartTime).format(
									"YYYY-MM-DD hh:mm:ss")
							})
						}
						let ai_Workitems = JSON.stringify(resJson.Data.ai_Workitems)
						uni.navigateTo({
							url: "/pages/Approval/ApprovalHistory?ai_Workitems=" + ai_Workitems
						})
					} else {
						uni.hideLoading()
						this.$errorToast(resJson.Msg)
					}
				})
			},
			// 差旅费报销单详情
			getReimburse_Travel_Business_MainGetTheData(item) {
				uni.showLoading({
					title: '加载中'
				})
				Reimburse_Travel_Business_MainGetTheData({
					id: item.ApprovalFormId
				}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						if (resJson.Data.ai_Workitems !== null) {
							resJson.Data.ai_Workitems.forEach(item => {
								// 日期格式化
								item.StartTime = this.$moment(item.StartTime).format(
									"YYYY-MM-DD hh:mm:ss")
							})
						}

						let ai_Workitems = JSON.stringify(resJson.Data.ai_Workitems)
						uni.navigateTo({
							url: "/pages/Approval/ApprovalHistory?ai_Workitems=" + ai_Workitems
						})
					} else {
						uni.hideLoading()
						this.$errorToast(resJson.Msg)
					}
				})
			},
			// 日常审批撤回
			handleCancle(item) {
				console.log('撤回', item)
				var that = this




				// 点击的是删除
				this.$utils.showConfirm({
					content: '确定要撤回吗',
					confirmText: "撤回",
					confirmColor: "#D1100b"
				}).then(res => {
					if (res.confirm) {
						uni.showLoading({
							title: '撤回中'
						})

						this.loading = true
						if (item.TemplateName === '差旅费报销单') {
							Ai_WorkitemTravelApprovedCanceled({
								ApprovalFormId: item.ApprovalFormId
							}).then(resJson => {
								if (resJson.Success) {
									that.$sucessToast('已撤回')
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
									// 刷新我的发起列表
									that.openForm()
								} else {
									that.$errorToast(resJson.Msg);
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
								}

							})

						} else if (item.TemplateName === '日常报销单') {
							Ai_WorkitemDailyApprovedCanceled({
								ApprovalFormId: item.ApprovalFormId
							}).then(resJson => {
								if (resJson.Success) {
									that.$sucessToast('已撤回')
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
									// 刷新我的发起列表
									that.openForm()
								} else {
									that.$errorToast(resJson.Msg);
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
								}

							})
						} else if (item.TemplateName === '工资审批流') {
							Ai_WorkitemSalaryApprovedCanceled({
								id: item.ApprovalFormId
							}).then(resJson => {
								if (resJson.Success) {
									that.$sucessToast('已撤回')
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
									// 刷新我的发起列表
									that.openForm()
								} else {
									that.$errorToast(resJson.Msg);
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
								}

							})
						} else if (item.TemplateName === '工资名册审批流') {
							Ai_WorkitemSalaryRosterApprovedCanceled({
								id: item.ApprovalFormId
							}).then(resJson => {
								if (resJson.Success) {
									that.$sucessToast('已撤回')
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
									// 刷新我的发起列表
									that.openForm()
								} else {
									that.$errorToast(resJson.Msg);
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 2500)
								}

							})
						}


					} else {
						this.loading = false;
					}
				})
			},
			// 查看
			handleDetail(item) {
				let disabled = item.CreatedUserId === item.ParticipantId && item.ActivityName === '开始' ? false : true

				// 日常报销单查看
				if (item.TemplateName === '日常报销单') {
					uni.navigateTo({
						url: "/pages/Approval/DailyForm?ApprovalFormId=" + item.ApprovalFormId + '&disabled=' +
							disabled + '&ActivityName=' + item.ActivityName
					})
					// 差旅报销单查看
				} else if (item.TemplateName === '差旅费报销单') {
					uni.navigateTo({
						url: "/pages/Approval/TravelForm?ApprovalFormId=" + item.ApprovalFormId + '&disabled=' +
							disabled + '&ActivityName=' + item.ActivityName
					})
				} else if (item.TemplateName === '工资审批流') {
					uni.navigateTo({
						url: "/pages/Approval/SalaryApprovalProcessForm?ApprovalFormId=" + item.ApprovalFormId +
							'&disabled=' +
							disabled + '&ActivityName=' + item.ActivityName + '&title=查看'
					})
				} else {
					uni.navigateTo({
						url: "/pages/Approval/SalaryRosterApprovalForm?ApprovalFormId=" + item.ApprovalFormId +
							'&disabled=' +
							disabled + '&ActivityName=' + item.ActivityName + '&title=查看'
					})
				}
			},
			// 获取我发起的列表
			getAi_WorkitemGetMyInitiatedDataList() {
				this.status = "loading"
				uni.showLoading({
					title: '加载中'
				})
				Ai_WorkitemGetMyInitiatedDataList({
					DeptId: this.DetpId,
					PageIndex: this.pagination.current,
					PageRows: this.pagination.pageSize,
					Search: this.queryParam,
					...this.sorter
				}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						// 赋值总条数
						this.Total = resJson.Total;
						if (resJson.Data == null) {
							this.status = 'noMore'; // 没有更多数据
							return
						}
						if (this.pagination.current == 1) {
							this.list = resJson.Data;
						} else {
							this.list = this.list.concat(resJson.Data);
						}
						// this.list.forEach(item => {
						// 	item.SNameList = item.SharerNameList ?
						// 		item.SharerNameList.join("|") :
						// 		"";
						// });
						if (this.list.length >= resJson.Total) {
							this.status = 'noMore'; // 没有更多数据
						} else {
							this.status = 'loading'; // 没有更多数据
						}
					} else {
						this.status = 'noMore'; // 没有更多数据
					}

				})
			},
			openForm() {
				this.pagination.current = 1
				this.list = []
				this.getAi_WorkitemGetMyInitiatedDataList()
			}
		}
	}
</script>

<style lang="less" scoped>
</style>